<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局</title>
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet/less" href="./assets/css/reset.less">
    <link rel="stylesheet/less" href="./assets/css/index.less">
</head>

<body>
    <header class="header navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header logo">
                <button type="button" class="navbar-toggle collapsed wow bounceInRight" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand wow bounceInLeft"  href="#">Spirit</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a class="wow rotateInDownLeft" data-wow-delay="0ms">HOME</a></li>
                    <li><a class="wow rotateInDownLeft" data-wow-delay="200ms">About</a></li>
                    <li><a class="wow rotateInDownLeft" data-wow-delay="300ms">SERVICES</a></li>
                    <li><a class="wow rotateInDownLeft" data-wow-delay="400ms">portfolio</a></li>
                    <li><a class="wow rotateInDownLeft" data-wow-delay="500ms">testimonials</a></li>
                    <li><a class="wow rotateInDownLeft" data-wow-delay="600ms">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </header>

    <div class="banner">
        <div class="title wow rotateInDownLeft" data-wow-delay="0ms">wELCOME on <span class="wow bounceInLeft" data-wow-delay="1s">spirit8</span></div>
        <div class="desc wow fadeInLeft" data-wow-delay="500ms">We are a digital agency with <span>years of experience</span>
            and with <span>extraordinary people</span>
        </div>
        <a class="more wow fadeInUpBig" data-wow-delay="500ms" href="javascript:void(0)">↓</a>
    </div>

    <div class="about">
        <div class="container">
            <div class="left">
                <img src="./assets/images/about-background.png" alt="">
            </div>

            <div class="right">
                <div class="title">
                    <div class="top wow lightSpeedIn">ABOUT US</div>
                    <div class="buttom wow slideInRight"><span>SOME</span> WORDS <span>ABOUT US</span></div>
                </div>

                <div class="content wow slideInLeft" data-wow-delay="100ms">
                    We love building and rebuilding brands through our specific skills.
                    Using colour, fonts, and illustration,
                    we brand companies in a way they will never forget.
                </div>

                <ul class="list wow slideInLeft">
                    <li>
                        <span class="glyphicon glyphicon-record" data-wow-delay="200ms" aria-hidden="true"></span>
                        <span>Mission - </span>
                        We deliver uniqueness and quality
                    </li>

                    <li>
                        <span class="glyphicon glyphicon-record" data-wow-delay="300ms" aria-hidden="true"></span>
                        <span>Skills - </span>
                        Delivering fast and excellent results
                    </li>

                    <li>
                        <span class="glyphicon glyphicon-record" data-wow-delay="400ms" aria-hidden="true"></span>
                        <span>Clients - </span>
                        Satisfied clients thanks to our experience
                    </li>
                </ul>

                <div class="more wow bounceInUp">
                    <span class="glyphicon glyphicon-briefcase"></span>
                    <span>Browse our work</span>
                </div>
            </div>

        </div>
    </div>

    <div class="team">
        <div class="container">
            <div class="title wow bounceInDown" data-wow-delay="100ms">MEET <span>OUR TEAM</span></div>

            <div class="list">
                <div class="item wow lightSpeedIn" data-wow-delay="200ms">
                    <div class="cover">
                        <img src="./assets/images/cover.png">
                    </div>
                    <div class="box">
                        <div class="name">Jason Statham</div>
                        <div class="job">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>

                <div class="item wow lightSpeedIn" data-wow-delay="300ms">
                    <div class="cover">
                        <img src="./assets/images/cover.png">
                    </div>
                    <div class="box">
                        <div class="name">Van Damme</div>
                        <div class="job">No English</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>

                <div class="item wow lightSpeedIn" data-wow-delay="400ms">
                    <div class="cover">
                        <img src="./assets/images/cover.png">
                    </div>
                    <div class="box">
                        <div class="name">Sylvester Stallone</div>
                        <div class="job">Cigar Lover</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>

                <div class="item wow lightSpeedIn" data-wow-delay="500ms">
                    <div class="cover">
                        <img src="./assets/images/cover.png">
                    </div>
                    <div class="box">
                        <div class="name">Jet Li</div>
                        <div class="job">I need more money</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                    </div>
                </div>

            </div>

            <div class="more wow fadeInDownBig">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <div class="services">
        <div class="container">
            <div class="title wow bounceInDown" data-wow-delay="100ms">take a look at <span>our services</span></div>
            <div class="desc wow fadeInLeftBig" data-wow-delay="150ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
            
            <div class="list">
                <div class="item wow fadeInUpBig" data-wow-delay="200ms">
                    <div class="device">
                        <img src="./assets/images/01.png">
                    </div>
                    <div class="box">
                        <div class="ince">WEB DESIGN</div>
                        <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    </div>
                </div>

                <div class="item wow fadeInUpBig" data-wow-delay="300ms">
                    <div class="device">
                        <img src="./assets/images/02.png">
                    </div>
                    <div class="box">
                        <div class="ince">MOBILE APPS</div>
                        <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    </div>
                </div>

                <div class="item wow fadeInUpBig" data-wow-delay="400ms">
                    <div class="device">
                        <img src="./assets/images/03.png">
                    </div>
                    <div class="box">
                        <div class="ince">PHOTOGRAPHY</div>
                        <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    </div>
                </div>

                <div class="item wow fadeInUpBig" data-wow-delay="500ms">
                    <div class="device">
                        <img src="./assets/images/04.png">
                    </div>
                    <div class="box">
                        <div class="ince">MARKETING</div>
                        <div class="content">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="clients">
        <div class="container">
            <div class="title wow bounceInDown" data-wow-delay="100ms">some of <span>our clients</span></div>
            <div class="write">
                <div class="item wow fadeInUpBig" data-wow-delay="200ms"><img src="./assets/images/Layer 69.png" alt=""></div>
                <div class="item wow fadeInUpBig" data-wow-delay="300ms"><img src="./assets/images/Layer 65.png" alt=""></div>
                <div class="item wow fadeInUpBig" data-wow-delay="400ms"><img src="./assets/images/Layer 68.png" alt=""></div>
                <div class="item wow fadeInUpBig" data-wow-delay="500ms"><img src="./assets/images/Layer 67.png" alt=""></div>
                <div class="item wow fadeInUpBig" data-wow-delay="600ms"><img src="./assets/images/Layer 64.png" alt=""></div>
            </div>

            <div class="more wow fadeInDownBig">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <div class="work">
        <div class="container">
            <div class="title wow bounceInDown" data-wow-delay="100ms">take a look at our work</div>
            <div class="desc wow fadeInLeftBig" data-wow-delay="150ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
            
            <div class="box">
                <div class="top">
                    <div class="left wow rollIn" data-wow-delay="150ms">Filter by type</div>
                    <div class="right wow rollIn" data-wow-delay="150ms">
                          <a href="javascript:void(0)">All</a>
                          <a href="javascript:void(0)">Web design </a>
                          <a href="javascript:void(0)">Mobile design</a>
                          <a href="javascript:void(0)">Photograpy</a>
                    </div>
                    <select class="menu wow rollIn" data-wow-delay="150ms">
                        <option value="">All</option>
                        <option value="">Web design</option>
                        <option value="">Mobile design</option>
                        <option value="">Photograpy</option>
                    </select>
                </div>

                <div class="list">
                    <div class="item wow bounceIn" data-wow-delay="200ms">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="200ms">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="200ms">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="200ms">
                        <img src="./assets/images/work-img.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="300ms">
                        <img src="./assets/images/work-img2.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="300ms">
                        <img src="./assets/images/work-img2.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="300ms">
                        <img src="./assets/images/work-img2.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="300ms">
                        <img src="./assets/images/work-img2.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="400ms">
                        <img src="./assets/images/work-img3.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="400ms">
                        <img src="./assets/images/work-img3.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="400ms">
                        <img src="./assets/images/work-img3.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                    <div class="item wow bounceIn" data-wow-delay="400ms">
                        <img src="./assets/images/work-img3.png" alt="">
                        <div class="mask">
                            <div class="stitle">trend and fashion</div>
                            <div class="sdesc">Website design</div>
                            <span class="plus">+</span>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="oct">
        <div class="container">
            <div class="title wow bounceInDown" data-wow-delay="100ms"><span>our clients'</span>testimonials</div>
            <div class="desc wow fadeInLeftBig" data-wow-delay="150ms">This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
            
            <div class="der wow fadeInRightBig" data-wow-delay="250ms"><span>Dean Martin，</span> CEO Acme Inc.</div>

            <div class="more wow fadeInDownBig">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <div class="contact">
        <div class="container">
            <div class="title wow bounceInDown" data-wow-delay="100ms">feel free to<span>contact us</span></div>
            
            <div class="desc wow fadeInLeftBig" data-wow-delay="150ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
            
            <div class="box">

                <div class="info">
                    <div class="item wow slideInLeft" data-wow-delay="200ms">
                        <div class="name">Name<sup>*</sup></div>
                        <input type="text" placeholder="请输入昵称">
                    </div>

                    <div class="item wow slideInLeft" data-wow-delay="200ms">
                        <div class="name">Email address<sup>*</sup></div>
                        <input type="email" placeholder="请输入邮箱">
                    </div>
                    
                </div>

                <div class="message wow slideInLeft" data-wow-delay="200ms">
                    <div class="name">Message<sup>*</sup></div>
                    <textarea name="" placeholder="请输入留言内容" rows="8"></textarea>
                </div>

                <div class="button wow slideInLeft" data-wow-delay="200ms">
                    <button type="button">send</button>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">

            <div class="copyleft wow rotateIn" data-wow-delay="100ms">
                ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span>
            </div>

            <div class="link">
                <div class="item wow lightSpeedIn" data-wow-delay="200ms"><img src="./assets/images/footer1.png" alt=""></div>
                <div class="item wow lightSpeedIn" data-wow-delay="300ms"><img src="./assets/images/footer2.png" alt=""></div>
                <div class="item wow lightSpeedIn" data-wow-delay="400ms"><img src="./assets/images/footer3.png" alt=""></div>
                <div class="item wow lightSpeedIn" data-wow-delay="500ms"><img src="./assets/images/footer4.png" alt=""></div>
                <div class="item wow lightSpeedIn" data-wow-delay="600ms"><img src="./assets/images/footer5.png" alt=""></div>
            </div>
        </div>
    </footer>

</body>

</html>

<!-- 引入less -->
<script src="./assets/js/less.min.js"></script>
<!-- 引入jquery -->
<script src="./assets/js/jquery.min.js"></script>
<!-- 引入bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>
<!-- 引入animation -->
<script src="./assets/js/wow.min.js"></script>
<script>
    new WOW().init();
</script>